<template>
  <div class="historyOrder">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教材管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看历史订单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="5">
        <el-select
          class="full-line"
          v-model="form.majorId"
          filterable
          remote
          clearable
          placeholder="请选择专业名称">
          <el-option
            v-for="item in majorChoose"
            :label="item.majorName"
            :value="item.majorID">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          @change="getGrade"
          v-model="form.grade"
          type="year"
          placeholder="请选择年级"
          class="full-line">
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          @change="getAcademicYear"
          v-model="form.academicYear"
          type="year"
          placeholder="请选择学年"
          class="full-line">
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-select
          clearable
          class="full-line"
          v-model="form.term"
          placeholder="请选择学期">
          <el-option label="01" value="01"></el-option>
          <el-option label="02" value="02"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="overflow-clear">
        <el-button type="primary" @click="searchOrder" class="float-right">立即搜索</el-button>
      </el-col>
    </el-row>
    <hr>
    <div class="overflow-clear">
      <el-button-group class="float-right mb-5">
      <el-button
        type="primary"
        @click="exportOrder"
        v-loading.fullscreen.lock="fullscreenLoading"
        element-loading-text="拼命加载中">导出
      </el-button>
      <el-button type="primary" @click.native.prevent="printInfo">打印</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="orderTable"
      border
      style="width: 100%">
      <el-table-column
        prop="courseNameCN"
        label="课程名称"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="textbookName"
        label="教材名称"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="publishingHouse"
        label="出版社"
        width="140">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        width="100">
      </el-table-column>
      <el-table-column
        prop="isbn"
        label="ISBN"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="majorName"
        label="使用专业"
        min-width="130">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="预定数量"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="remark1"
        label="备注"
        min-width="120">
      </el-table-column>
    </el-table>

    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'historyOrder',
    data(){
      return {
        form: {
          majorId: '',
          grade: '',
          academicYear: '',
          term: '',
          isConfirm: '2'
        },
        orderTable: [],
        majorChoose: [],
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        total: 40,
        fullscreenLoading: false
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        this.getMajorInfo();
        this.getOrder();
      },
      getOrder(){
        this.$http.post(this.$until.url + '/textBookOrder/getTextBookOrder2', this.form,
          {
            params: {
              page: this.currentPage,
              pageSize: this.pageSize
            },
            emulateJSON: true
          }).then(response => {
          this.total = response.body.countNum;
          this.orderTable = response.body.orderList
        }, response => {
          console.log('文件获取失败');
        });
      },
      searchOrder(){
        this.getOrder();
      },
      getMajorInfo: function () {
        this.$http.get(this.$until.url + '/baseInfoCommon/initData').then(response => {
          this.majorChoose = response.body.majorAndId
        }, response => {
          console.log('文件获取失败');
        });
      },
      getGrade(val){
        this.form.grade = val
      },
      getAcademicYear(val){
        this.form.academicYear = val
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getOrder()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getOrder()
      },
      exportOrder(){
        this.fullscreenLoading = true
        this.$http.get(this.$until.url + '/textBookOrder/exportOrder', {
          params: this.form
        }).then((res) => {
          this.fullscreenLoading = false
          var url = res.body.message
          try {
            var elemIF = document.createElement("iframe");
            elemIF.src = url;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
          }
        }, (err) => {
          this.$message.error('导出失败');
          this.fullscreenLoading = false
        })
      },
      printInfo(){
        var msg = '';
        for (var key in this.form) {
          if (this.form[key] == '') {
            continue;
          }
          msg += `&${key}=${this.form[key]}`
        }
        //console.log(msg)
        window.open(`${this.$until.url}/ReportServer?reportlet=printOrder.cpt${msg}`)
      }
    }
  }
</script>
